/* stylelint-disable primer/colors */
@define-mixin lightThemeIssueLabel {
  --lightness-threshold: 0.453;
  --border-threshold: 0.96;
  --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));

  background: rgb(var(--label-r), var(--label-g), var(--label-b));
  color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));
  border-color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));

  /* Selected state */
  &:where([data-selected='true']) {
    background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));
  }

  &:where([data-selected='true'])::after {
    /* stylelint-disable-next-line primer/box-shadow */
    box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));
  }

  /* Interactive hover states */
  &:where([data-cursor-is-interactive='true']:hover) {
    background-image: linear-gradient(rgb(0, 0, 0, 0.15), rgb(0, 0, 0, 0.15)),
      linear-gradient(
        rgb(var(--label-r), var(--label-g), var(--label-b)),
        rgb(var(--label-r), var(--label-g), var(--label-b))
      );
    box-shadow: var(--shadow-resting-medium);
  }
}

@define-mixin darkThemeIssueLabel {
  --lightness-threshold: 0.6;
  --background-alpha: 0.18;
  --border-alpha: 0.3;
  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));

  background: rgb(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
  border-color: hsl(
    var(--label-h),
    calc(var(--label-s) * 1%),
    calc((var(--label-l) + var(--lighten-by)) * 1%),
    var(--border-alpha)
  );

  /* Selected state */
  &:where([data-selected='true'])::after {
    /* stylelint-disable-next-line primer/box-shadow */
    box-shadow: 0 0 0 2px
      hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
  }

  /* Interactive hover states */
  &:where([data-cursor-is-interactive='true']:hover) {
    background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
    box-shadow: var(--shadow-resting-medium);
  }
}

.IssueLabel {
  /* Color variables - dynamically set via inline CSS custom properties */
  --label-r: 153;
  --label-g: 153;
  --label-b: 153;
  --label-h: 0;
  --label-s: 0;
  --label-l: 60;
  --perceived-lightness: calc(
    ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255
  );
  --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));

  position: relative;
  border-width: var(--borderWidth-thin);
  border-style: solid;
}

@media (prefers-color-scheme: light) {
  [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel {
    @mixin lightThemeIssueLabel;
  }

  [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel {
    @mixin darkThemeIssueLabel;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel {
    @mixin lightThemeIssueLabel;
  }

  [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel {
    @mixin darkThemeIssueLabel;
  }
}

/* Light mode styles */
[data-color-mode='light'] .IssueLabel {
  @mixin lightThemeIssueLabel;
}

/* Dark mode styles */
[data-color-mode='dark'] .IssueLabel {
  @mixin darkThemeIssueLabel;
}

/* Selected state */

.IssueLabel:where([data-selected='true']) {
  outline: none;
}

.IssueLabel:where([data-selected='true'])::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(var(--base-size-2) * -1);
  right: calc(var(--base-size-2) * -1);
  bottom: calc(var(--base-size-2) * -1);
  left: calc(var(--base-size-2) * -1);
  display: block;
  pointer-events: none;
  border-radius: var(--borderRadius-full);
}

/* Remove button styling */
.IssueLabel:where([data-has-remove-button='true']) {
  padding-right: 0;
}

.RemoveButton:where([data-has-multiple-action-targets='true']) {
  position: relative;
  z-index: 1;
}
